<template>
<div class="register-container">

    <div class="register-content">
        <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" />
            <h2>BFX 资讯</h2>
        </div>

        <div class="register-form">
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="username" label="用户名" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请输入用户名' }]" />

                <van-field v-model="phone" type="tel" name="phone" label="手机号" placeholder="请输入手机号" :rules="[
                { required: true, message: '请输入手机号' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
            ]" />

                <van-field v-model="smsCode" center clearable label="验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '请输入验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" :disabled="isCounting" @click="sendSmsCode">
                            {{ isCounting ? `${countdown}秒后重发` : '发送验证码' }}
                        </van-button>
                    </template>
                </van-field>

                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" :rules="[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码至少6位' }
            ]" />

                <van-field v-model="confirmPassword" type="password" name="confirmPassword" label="确认密码"
                    placeholder="请再次输入密码" :rules="[
                { required: true, message: '请再次输入密码' },
                { validator: validateConfirmPassword, message: '两次密码不一致' }
            ]" />

                <div class="agreement">
                    <van-checkbox v-model="agreement" shape="square">
                        我已阅读并同意
                        <span class="agreement-link" @click.stop="showAgreement('user')">《用户协议》</span>
                        和
                        <span class="agreement-link" @click.stop="showAgreement('privacy')">《隐私政策》</span>
                    </van-checkbox>
                </div>

                <div class="submit-btn">
                    <van-button round block type="primary" native-type="submit" :disabled="!agreement">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>

        <div class="login-link">
            已有账号？<span @click="$router.push('/login')">去登录</span>
        </div>
    </div>
</div>
</template>

<script>

export default {
    name: 'RegisterPage',
    data() {
        return {
            username: '',
            phone: '',
            smsCode: '',
            password: '',
            confirmPassword: '',
            agreement: false,
            isCounting: false,
            countdown: 60
        }
    },
    methods: {
        validateConfirmPassword() {
            return this.password === this.confirmPassword
        },

        sendSmsCode() {
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                this.$toast('请输入正确的手机号')
                return
            }

            // 模拟发送验证码
            this.$toast.success('验证码已发送')
            this.isCounting = true
            this.countdown = 60

            const timer = setInterval(() => {
                this.countdown--
                if (this.countdown <= 0) {
                    clearInterval(timer)
                    this.isCounting = false
                }
            }, 1000)
        },
        // 提交注册表单
        onSubmit() {
            if (!this.agreement) {
                this.$toast('请先同意用户协议和隐私政策')
                return
            }

            // 模拟注册请求
            this.$toast.loading({
                message: '注册中...',
                forbidClick: true
            })

            setTimeout(() => {
                this.$toast.clear()
                this.$toast.success('注册成功')
                this.$router.push('/login')
            }, 1500)
        },
        // 展示协议
        showAgreement(type) {
            let title = type === 'user' ? '用户协议' : '隐私政策'
            this.$dialog.alert({
                title: title,
                message: `这是${title}的内容，实际项目中应该显示完整的协议内容。`
            })
        }
    }
}
</script>

<style scoped>
.register-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.register-content {
    padding: 20px;
}

.logo {
    text-align: center;
    margin: 30px 0;
}

.logo img {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: block;
    /* 转为块级元素 */
    margin-left: auto;
    /* 左外边距自动 */
    margin-right: auto;
    /* 右外边距自动 */
}

.logo h2 {
    margin-top: 8px;
    font-size: 20px;
    color: #333;
}

.register-form {
    margin-bottom: 20px;
}

.agreement {
    margin: 15px 0;
    font-size: 14px;
}

.agreement-link {
    color: #1989fa;
}

.submit-btn {
    margin-top: 20px;
}

.login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #646566;
}

.login-link span {
    color: #1989fa;
}
</style>